<template>
	<div class="finance" ref="scroll">
		<div class="transaction" ref="dH">
			<ul class="title">
				<li @click='buyIndex = 0,topNav($event)' :class="{checked: buyIndex === 0}">内部互转</li>
				<li @click='buyIndex = 1,topNav($event)' :class="{checked: buyIndex === 1}">历史记录</li>
			</ul>
			<div class="con">
                <div v-if="buyIndex ==0">
					<div class="wrap">
						<div class="f_title">转账须知：转账金额必须小于等于当前可用余额</div>
						<dl>
							<dd v-for="(item,index) in initData" :key="index">
								<input type="radio" name="myradio" :value="item.val" v-model="picked" >
								<label :for="item.val">
									<i class="mes">{{item.name}} </i>
									<i class="procedures">(手续费{{price}})%</i>
								</label>
								<br>
									<label >
									<i class="mes2">可用余额:</i>
									<i class="procedures">{{item.yuE}}</i>
								</label>
							</dd>
						</dl>
						<div class="inpF">
							<div class="list">
								<label for="">转出数量</label><input type="text" placeholder="请输入数量" v-model="buyNum" @input="change">
							</div>
							<div class="list">
								<label for="">手机验证码</label><input type="text" v-model="code" placeholder="输入验证码"> <input type="button" value="点击获取" @click="sendCode">
							</div>
							<div class="sendBtn" @click="sendApply">
								提交
							</div>
						</div>
					</div>
                </div>
                <div v-else>
                     <table>
						<tr><th>序号</th><th>财务类型</th><th>账户类型</th><th>金额</th><th>转账时间</th></tr>
						<tr v-for="(item,index) in listDat" :key="index">
							<td>{{item.id}}</td>
							<td>{{item.type}}</td>
							<td>{{item.ptype}}</td>
							<td>{{item.price}}</td>
							<td>{{item.addtime |ymtDate}}</td>
						</tr>
				    </table>
                </div>
			</div>
		</div>

	</div>
</template>
<script>
import { caiwuapi,caiwuapiList,caiwuapiSendcode,caiwuapiApply } from '../../config/getData';


export default {
	data() {
		return {
		buyIndex: 0,
		buyNum:'',
		code:'',
		initData: [
			{ val:1, name:'释放钱包→交易钱包', jine:'5%', yuE:'--' },
			{ val:2, name:'智能钱包→交易钱包', jine:'5%', yuE:'--' },
			{val:3,name:'算力钱包→交易钱包',jine:'5%',yuE:'--'}
		],
		price:-1,
		total: -1,
		page: 1,
		buyShow: false,
		picked:1,
		listDat:[]
		};
	},
	filters: {
		from_men(str) {
			return str.substr(0, 7) + "****";
		}
	},
	methods: {
		topNav(e) {
			if (this.buyIndex === 0) {
				caiwuapi().then( res => {
					this.initData[0]['yuE'] = res.data.sfprice
					this.initData[1]['yuE'] = res.data.znprice
					this.initData[2]['yuE'] = res.data.slprice
					this.price = res.data.transfer_ratio
				})
			} else if (this.buyIndex === 1) {
				caiwuapiList().then( res => {
					this.listDat =res.data
				})
			}
		},
		sendCode(){
			caiwuapiSendcode().then(res =>{
				alert(res.msg)

			})
		},
		change(){
			this.buyNum = /[0-9]+/g.exec(this.buyNum)
		},
		sendApply(){

			if(this.buyNum == '') return alert('请输入数量')

			caiwuapiApply(this.picked,this.buyNum[0],this.code).then(res =>{
				alert(res.msg)
				window.location.reload()
			})
		}


	},
	created() {
		this.topNav();
	},
	mounted() {

	},
	components: {

	}
};
</script>
<style lang="scss" scoped>
.Gtitle { margin: 20px 0 6px 15px;}
@import "../../assets/css/all";
.finance {@include screen;min-height: 100%;overflow-y: auto;

	.transaction {
		ul.title {display: flex;background-color: #fff;
		li {width: 50%;text-align: center;line-height: 40px;font-size: 16px;border-top: 2px solid transparent;color: #808080;}
		li.checked {border-bottom: 2px solid #e86e50;color: #e86e50;}
		li + li { border-left: 1px solid #f5f5f5;}
		}
	}
	.con{ margin-top: 10px;padding-bottom:80px;background: #fff;
		.wrap{width: 94%;margin: 0 auto;padding: 10px;
			.f_title{background: #f5f4f9;text-align: center;line-height: 30px;}
			dl{
				dd{padding: 8px 15px;
					input[type=radio]{vertical-align: middle;display: inline-block;}
					input[type=radio]:checked{color: #6eaa3c}
					label{color: #555454 }
					i{font-style: normal;display: inline-block;}
					i.mes{width: 130px;}
					i.mes2{margin-left: 16px;}
					i.procedures{color: #f12e2e;margin-left: 15px;}
				}
			}
			.inpF{border-top: 1px solid #e5e5ee;margin-top: 30px;
				.list{line-height: 45px;border-bottom: 1px solid #e5e5e5;margin-left: 30px;
					label{width: 70px;display: inline-block;}
					input[type=text]{background: #f5f5f9;padding: 8px 5px;margin-left: 10px;border: none;display: inline-block;width: 125px;}
					input[type=button]{ width: 4.2rem;height: 1.7rem; margin-left: 0.3rem; background-color: #6eaa3c; color: #ffffff;border-radius: 5px;line-height: 1.7rem;text-align: center;}
				}
				.sendBtn{width: 85%;margin-left: auto;margin-right: auto;margin-top: 30px; font-size: 18px; text-align: center; text-decoration: none;color: #fff;line-height: 2.55555556;border-radius: 5px;  background: #6eaa3c
				}
			}
		}
	}
}
</style>






